<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<link type="text/css" rel="stylesheet" href="css/main.css" />
	<script type="text/javascript" src="js/cookie.js"></script>
	<title>CollectABase - Musik, Filme, Games &amp; mehr!</title>
	<script>
		var COOKIE_NAME = "currentPage";
		var COOKIE_START_PAGE = "music_Content";
	</script>


	<script src="contentflow/contentflow.js"></script>
</h:head>
<h:body>
	<h:form>
		<header id="mainHeader">
			<div class="headerButton" id="musicHeaderButton" onclick="scrollToId('music_Content');">
				<img id="musicIcon" class="headerIcon" src="img/Music_white.png" title="Music" />
			</div>
			<div class="headerButton" id="movieHeaderButton" onclick="scrollToId('movie_Content')">
				<img id="movieIcon" class="headerIcon" src="img/Movie_white.png" title="Movies" />
			</div>
			<div class="headerButton" id="gameHeaderButton" onclick="scrollToId('game_Content')">
				<img id="gameIcon" class="headerIcon" src="img/Game_white.png" title="Games" />
			</div>
			<div class="headerButton" id="profileHeaderButton" onclick="scrollToId('profile_Content')">
				<img id="profileIcon" class="headerIcon" src="img/User_white.png" title="Profile" />
			</div>
			<div class="headerButton" id="messageHeaderButton" onclick="scrollToId('message_Content')">
				<img id="messageIcon" class="headerIcon" src="img/Message_white.png" title="Messages" />
			</div>
			<div style="float: right;">
				<p:commandButton styleClass="logoutButton" value="" action="#{loginController.logout}" onclick="deleteCookie(COOKIE_NAME)" ajax="false"></p:commandButton>
			</div>
		</header>
		<div id="menuIcon"></div>
		<div id="backToTop"></div>
		<div id="page">
			<div class="contentPage" id="music_Content" style="">
				<div style="position: relative; left: 5%; width: 90%;">
					<div class="ContentFlow" id="albumFlow" style="overflow: visible;">
						<div class="loadIndicator">
							<div class="indicator"></div>
						</div>
						<div class="flow">
							<div class="preButton"></div>
							<div class="nextButton"></div>
							<ui:repeat var="album" value="#{contentFlowBean.albums}">
								<div class="item">
									<img class="content" src="data/albums/#{album.image}" alt="#album#{album.id}" />
									<div class="caption">
										#{album.name}<br />#{album.interpret.name}
									</div>
								</div>
							</ui:repeat>
						</div>
						<div class="globalCaption" style="margin-top: 100px; font-size: 30px; color: black; font-family: 'goodtimes'"></div>
					</div>
				</div>
				<div style="position: relative; left: 5%; width: 90%; margin-top: 20px;">
					<div id="collectionHeader">Your Collection</div>
					<ui:repeat var="album" value="#{contentFlowBean.albums}">
						<div id="album#{album.id}" style="background-color: white;">
							<h:panelGrid columns="2" style="width:100%; padding-top:10px;padding-bottom:10px;border-bottom:2px solid #ddd;" columnClasses="album_cover, album_detail">
								<p:graphicImage url="data/albums/#{album.image}" width="150px" height="150px" style="margin-left:100px;" />

								<p:outputPanel style="">
									<h:panelGrid columns="2">
										<h:outputText value="Name: " />
										<h:outputText value="#{album.name}" style="font-weight: bold" />

										<h:outputText value="Interpret:" />
										<h:outputText value="#{album.interpret.name}" style="font-weight: bold" />

										<h:outputText value="ID:" />
										<h:outputText value="#{album.id}" style="font-weight: bold" />

										<h:outputText value="Rating:" />
										<p:rating value="#{album.rating}" cancel="false" />
									</h:panelGrid>
								</p:outputPanel>
							</h:panelGrid>
						</div>
					</ui:repeat>

				</div>

			</div>
			<div class="contentPage" id="movie_Content" style="background-color: rgba(255, 0, 0, 0.4); height: 400px;"></div>
			<div class="contentPage" id="game_Content" style="background-color: rgba(0, 255, 0, 0.4); height: 400px;"></div>
			<div class="contentPage" id="profile_Content" style="background-color: rgba(0, 170, 240, 0.4); height: 400px;"></div>
			<div class="contentPage" id="message_Content" style="background-color: rgba(0, 255, 255, 0.4); height: 400px;"></div>
		</div>
		<footer id="footer">
			<div style="line-height: 30px; float: left;">
				LoggedIn as <a style="color: white;" href="javascript:scrollToId('profile_Content');">#{loginController.user.nickName}</a>
			</div>
			<span id="logo"><a style="color: white; text-decoration: none" href="./about.xhtml">CollectABase</a></span>

		</footer>
		<script>
			//<![CDATA[
			var speedInMS = 300;
			var pageScrollingSpeed = 500;
			var mouseX, mouseY;
			var isAnimatingUp = false;
			var currentAlbum = "";

			function mouseMove(evt) {
				mouseX = evt.clientX;
				mouseY = evt.clientY;

				if (mouseY > parseInt($("#mainHeader").css("height"))
						&& !isAnimatingUp) {
					moveUpUpperBar();
				}
				
				if($("#page").prop("scrollTop") > 100){
					console.info("visible");
					$("#backToTop").animate({opacity: "1"});
				}else{
					console.info("invisible");
					$("#backToTop").animate({opacity: "0"});
				}
			}

			function moveDownUpperBar() {
				$("#mainHeader").stop().animate({
					top : "0px"
				}, speedInMS);
				// 				$("#page").stop().animate({
				// 					top : $("#mainHeader").css("height")
				// 				}, speedInMS);
				isAnimatingUp = false;
			}
			function moveUpUpperBar() {
				$("#mainHeader").stop().animate({
					top : "-90px"
				}, speedInMS, function() {
					isAnimatingUp = false;
				});
				// 				$("#page").stop().animate({
				// 					top : "0px"
				// 				},speedInMS);
				isAnimatingUp = true;
			}

			function onItemClick(item) {
				var anchor = $(item.item.children[0]).attr("alt");
				console.info($("#page").prop("scrollTop"))
				console.info($(anchor).offset().top);
				console.info(anchor);
				$("#page").animate({
					scrollTop : $(anchor).offset().top
				}, 500);
				setTimeout(function(){
					$(anchor).animate({opacity:"0.8"},500,function(){$(anchor).animate({opacity:"1"},500);});
				},500);
			}

			function scrollToId(id) {
				if (getCookie(COOKIE_NAME) == id)
					return;
				var tempCurrent = getCookie(COOKIE_NAME);
				setCookie(COOKIE_NAME, id);
				
				$("#page").animate({
					scrollTop : 0
				}, 500);

				$(".headerButton").each(function(k, v) {
					$(v).css("border-bottom", "none");
				});
				var underScoreIndex = id.indexOf("_");
				var btnId = id.substr(0, underScoreIndex) + "HeaderButton";
				$("#" + btnId).css("border-bottom", "2px solid #ccc");

				$("#" + id).css("z-index", "5");
				$("#" + id).css("margin-left", "100%");
				$("#" + tempCurrent).css("z-index", "4");
				$("#" + tempCurrent).css("margin-left", "0%");

				$("#" + id).css("transition",
						"margin-left " + pageScrollingSpeed + "ms");
				$("#" + id).css("margin-left", "0%");

				$("#" + tempCurrent).css("transition",
						"margin-left " + pageScrollingSpeed + "ms");
				$("#" + tempCurrent).css("margin-left", "-100%");

				setTimeout(function() {
					$("#" + id).css("transition", "");
					$("#" + tempCurrent).css("transition", "");
					$("#" + tempCurrent).css("margin-left", "100%");
				}, pageScrollingSpeed);
			}

			$(document).mousemove(mouseMove);
			$("#menuIcon").click(moveDownUpperBar);

			if (!getCookie(COOKIE_NAME))
				setCookie(COOKIE_NAME, COOKIE_START_PAGE);
			$("#" + getCookie(COOKIE_NAME)).css("margin-left", "0px");

			var underScoreIndex = getCookie(COOKIE_NAME).indexOf("_");
			var btnId = getCookie(COOKIE_NAME).substr(0, underScoreIndex)
					+ "HeaderButton";
			$("#" + btnId).css("border-bottom", "2px solid #ccc");

			var cF = new ContentFlow('albumFlow', {
				reflectionHeight : 0.3,
				scrollInFrom : 0,
				maxItemHeight : 250,
				visibleItems : 5,
				onclickActiveItem : onItemClick,
			// 				onclickInactiveItem: onItemClick
			});

			//]]>
		</script>

	</h:form>
</h:body>
</html>